<template>
  <div class="loginContainer">
    <!-- 电话 -->
    <div class="topCall">
      <a href="tel:10086"><img src="../img/phone.png"></a>
    </div>
    <!-- logo图案 -->
    <div class="logo">
      <span>欢迎</span>
    </div>
    <!-- 登录输入框部分 -->
    <div class="login">
      <form action="" method="post">
        <div class="uname">
          <yd-icon name="pnum" custom slot="icon" size=".5rem"></yd-icon>
          <input placeholder="请输入手机号" style="margin-left:.15rem" type="tel" maxlength="11" v-model="phoneNumber">
          <router-link tag="label" to="/home/msgLogin">短信登录</router-link>
        </div>
        <div class="pwd">
          <yd-icon name="pwd" custom slot="icon" size=".4rem"></yd-icon>
          <input placeholder="请输入密码" type="password" maxlength="16" v-model="userPassword">
          <router-link tag="label" to="/home/change">忘记密码</router-link>
        </div>
      </form>
      <button @touchend="login">登录</button>
      <p @click="vister()">【跳过登录，我先试试】</p>
    </div>
    <!-- 注册账号 -->
    <div class="register">
      <router-link to="/home/register" tag="div">
        <img src="../img/fly.png" alt="">
        <p>还没账号？立即注册</p>
      </router-link>
    </div>
  </div>
</template>
<style lang="less" scoped>
  @import '~less/base';
  .loginContainer {
    img {
      max-width: 100%;
      max-height: 100%
    }
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: @background-a;
    .topCall { //顶部电话咨询
      height: 1rem;
      width: 100%;
      line-height: 1rem;
      text-align: right;
      padding-right: .3rem;
      margin-top: .3rem;
      img {
        height: .4rem;
      }
    }
    .logo { //中间logo部分
      height: 3rem;
      width: 100%;
      text-align: center;
      span {
        font-size: 20px;
        color: @color-t;
        line-height: 3rem;
        font-weight: bold;
        letter-spacing: 10px
      }
    }
    .login { //输入相关内容
      height: 5.4rem;
      width: 100%;
      form {
        padding-left: .5rem;
        input { //统一输入框样式
          width: 4.3rem;
          border: none;
          border-bottom: 1px solid @color-border1;
          height: .6rem;
          line-height: .6rem;
          margin-top: .3rem;
          margin-bottom: .3rem;
          margin-right: .2rem;
          margin-left: .25rem;
          font-size: 16px;
          padding-left: .2rem;
        }
        // .uname,.pwd{
        //     // position: relative;
        //      margin-left:1rem;
        //      width:100%;
        // }
        label { //切换登录方式，以及忘记密码
          margin-left: .2rem;
          font-size: .25rem;
          color: @color-s;
        }
      }
      button { //登录按钮
        width: 89%;
        margin-left: 4.7%;
        border: 1px solid @color-border2;
        height: 1rem;
        background-color: @color-btn1;
        border-radius: 5px;
        margin-top: .6rem;
        color: @color-btnFont;
        font-size: 18px;
        letter-spacing: 10px
      }
      button:active {
        background-color: @background-a
      }
      p { //游客模式
        margin-top: .5rem;
        font-size: 14px;
        text-align: center;
        color: @color-btnFont;
      }
    }
    .register {
      text-align: center;
      margin-top: .1rem;
      font-size: 12px;
      div {
        width: 50%;
        margin-left: 25%;
      }
      img {
        height: .84rem;
        margin-bottom: .3rem;
      }
    }
  }
</style>
<script>
  import * as types from '@/vuex/types';

  export default {
    data() {
      return {
        phoneNumber: '',//手机号
        userPassword: '',//密码
      }
    },
    methods: {
      vister() {//游客模式
        let data = {
          imei: this.$store.state.imei
        }
        this.ylAjax.curstom(data)
            .then(res=>{
                console.log(res)
                 this.$store.commit(types.LOGIN,res.data.token)
                 this.$router.push({path:"/chat"})
            })

        },
      login() {//登录
        let data = {
          mobilephone: this.phoneNumber,
          password: this.userPassword
        }
        let reg = /^[1][3,4,5,7,8][0-9]{9}$/;//电话号码正则
        if (!reg.test(this.phoneNumber)) {
          this.$dialog.alert({mes: '请输入正确手机号码'});
        } else if (this.userPassword.length == 0) {
          this.$dialog.alert({mes: '密码不能为空'})
        } else if (this.userPassword.length < 6) {
          this.$dialog.alert({mes: '密码不能少于6位'})
        } else {
          this.ylAjax.Login(data)
            .then(res => {
              if (res.state == 0) {
                this.$store.commit(types.LOGIN, res.data.token.token)
                this.$router.push({path: "/chat"})
                console.log(res.data)
                localStorage.userid = res.data.user.id;//保存用户ID
                localStorage.username = res.data.user.name;//保存用户name
                localStorage.myphoto = res.data.user.photo;
                localStorage.myphone = this.phoneNumber//保存用户名密码
//                localStorage.mypwd = this.userPassword
                localStorage.mypwd =parseInt(this.userPassword).toString(36); //用户密码转36进制保存
                this.$store.commit('phonenumber', localStorage.myphone)
                this.$store.commit('password', localStorage.mypwd)
                this.$store.commit('loginStatus', 0)
              } else {
                this.$dialog.alert({mes: res.message})
              }
            })
            .catch(error => {
              throw error
            })
        }

      }
    },
    created() {
      // this.$store.commit('phonenumber',localStorage.myphone)
      // this.$store.commit('password',localStorage.mypwd)
      // 判断并保存账号密码
      if(localStorage.myphone&&this.$store.state.phonenumber){
        this.phoneNumber = this.$store.state.phonenumber//手机号
        this.userPassword = parseInt(this.$store.state.password,36)//密码
//        console.log(this.userPassword)
      }else if(this.$store.state.phonenumber){
        if(this.$store.state.phonenumber.length <= 1) {
          this.phoneNumber = localStorage.myphone//手机号
          this.userPassword = parseInt(this.$store.state.password,36)//密码
          console.log(this.userPassword)
        }else{
          this.phoneNumber = this.$store.state.phonenumber//手机号
          // let pwd=this.$store.state.password
          this.userPassword = this.$store.state.password//密码
          console.log(this.userPassword)
        }
      }else if(localStorage.myphone){
        if (localStorage.myphone.length <1) {
          this.phoneNumber = this.$store.state.phonenumber//手机号
          this.userPassword = this.$store.state.password//密码
          console.log(this.userPassword)
        }else{
          this.phoneNumber = localStorage.myphone//手机号
          let pwd = localStorage.mypwd
          this.userPassword = parseInt( pwd,36)//密码
        }
      }
    },
    mounted() {
      let _this=this
       if(_this.phoneNumber&&_this.userPassword){
          _this.$dialog.loading.open('自动登录中，请稍后');
           window.loginTime= setTimeout(() => {
                   _this.login()
                   _this.$dialog.loading.close();
               }, 2000);

       }else{
           _this.$dialog.loading.close();
       }
       function plusReady(){
          plus.key.addEventListener("backbutton",function(){
            console.log(1)
            _this.$dialog.loading.close();
            clearTimeout(window.loginTime)
          })
       }
       if(window.plus){
          plusReady();
        }else{
          document.addEventListener("plusready",plusReady,false);
        }
    }
  }
</script>
